<template>
  <a-modal v-model:visible="visible" :title="modalTitle" width="35%" @ok="handleSubmit" @cancel="close">
    <a-form :model="formState" :label-col="{ span: 4 }" ref="formRef">
      <a-form-item label="红包" name="red" :rules="[{ required: true, message: '请输入红包' }]" extra="加/减都是在原本余额的基础上">
        <a-input-number v-model:value="formState.red" placeholder="请输入红包" style="width: 200px" />
      </a-form-item>
      <a-form-item label="备注" name="remark">
        <a-textarea v-model:value="formState.remark" placeholder="请输入备注" allow-clear />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import useModal from "@/utils/useModal";
import { reactive, ref } from "vue";
import { editRed } from "@/api/user";
import { message } from "ant-design-vue";

const { visible, modalTitle } = useModal();
const emits = defineEmits(["modal-success"]);

const formRef = ref();
const formState = reactive({
  red: "",
  remark: "",
});
const show = (id) => {
  modalTitle.value = "修改红包";
  formState.user_id = id
  visible.value = true;
};
const hide = () => {
  visible.value = false;
  formRef.value.resetFields();
};
const close = () => {
  formRef.value.resetFields();
};
// 保存
const handleSubmit = async () => {
  const params = {
    user_id: formState.user_id,
    red: formState.red,
    remark: formState.remark,
  };
  await formRef.value.validate().then(() => {
    editRed(params).then((res) => {
      if (res.code == 0) {
        message.success(res.msg);
        emits("modal-success");
        hide();
      }
    });
  });
};

// 暴露方法
defineExpose({ show });
</script>
